@import 'colorsRoot';

.footer {
    padding: 73px 0 62px 0;
    background-color: @backgroundRoseGold;

    .container {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .footer-logo-copy {
            .copy {
                font-family: GilroyRegular, sans-serif;
                font-size: 12px;
                color: @textLightMagenta;
                padding-top: 19px;
            }
        }

        .footer-social {
            text-align: center;

            .social-desc {
                font-family: GilroyBold, sans-serif;
                font-size: 16px;
                color: @textWhite;
                padding-top: 14px;
            }
        }

        .copy-adaptive-visible {
            display: none;
            font-family: GilroyRegular, sans-serif;
            font-size: 12px;
            color: @textLightMagenta;
            padding-top: 19px;
        }
    }
}

.present-image-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 3;
    width: 92px;
    height: 92px;
    background-image: linear-gradient(45.0deg, #71081e 0%, #d7485c 100%);
    border-radius: 50%;
    transition: all .4s;

    a {
        text-decoration: none;
        text-align: center;
    }

    &:hover {
        box-shadow: 0 0 13px 2px rgba(130,19,40,0.5);
    }

    &:hover ~ .present-message {
        visibility: visible;
        opacity: 1;
        transform: translateY(-10px);
    }

    .present-image {
        max-width: 100%;
    }
}

.present-message {
    visibility: hidden;
    opacity: 0;
    width: 172px;
    border-radius: 10px;
    border: 2px solid @borderRichRedBrown;
    display: inline-block;
    position: fixed;
    bottom: 30px;
    right: 130px;
    z-index: 3;
    transform: translateY(30px);
    transition: all .5s;

    &::after {
        content: '';
        width: 15px;
        height: 15px;
        border-right: 2px solid @borderRichRedBrown;
        border-bottom: 2px solid @borderRichRedBrown;
        position: absolute;
        top: 19px;
        right: -10px;
        background: @backgroundWhiteDouble;
        transform: rotate(-45deg);
    }

    .message {
        border-radius: 10px;
        padding: 10px 14px;
        background: @backgroundWhiteDouble;
        position: relative;
        z-index: 2;
        font-size: 15px;
        color: @borderRichRedBrown;
    }
}